<template>
  <mu-container class="form_container">
    <mu-paper class="demo-paper" :z-depth="1" v-for="(item,index) in filelist" :key="index"
      :style="{marginBottom:(index === filelist[filelist.length-1] ? '60px':'15px')}">
      <div style="font-size:16px;">{{item.filename}}
      </div>
      <div v-if="item.filename == '招标文件'">如有补遗澄清文件，请一起打包上传</div>

      <div v-if="item.filename != '招标文件'">
        <span v-if="item.istemplate === '1'">请用模板按示例制作。</span>
        <span v-if="item.istemplate === '0'">请按示例制作。</span>
        <van-button size="mini" type="info" @click="view(item.demofileurl)">示例</van-button>
        <van-button size="mini" type="info" v-if="item.istemplate === '1'" @click="downloadTemplate(item)">模板
        </van-button>
      </div>
      <div style="margin-bottom:10px;">文件格式：{{item.filetypes}}</div>
      <div style="margin-bottom:10px;color:#00897b;" v-if="item.isupload == '1'">已上传文件：{{item.filename}}</div>
      <div style="position:relative;display:flex;justify-content: space-between;">

        <mu-button small class="mu-buttons" data-mu-loading-size="22" color="primary"
          :style="{width:item.filename != '招标文件' ?'40%':'90%'}">本地上传</mu-button>
        <input id="uploaderInput" class="uploader__linput" :style="{width:item.filename != '招标文件' ?'40%':'90%'}"
          type="file" accept="" @change="fileInput_change($event,item)">

        <mu-button v-if="item.filename != '招标文件'" small class="mu-buttons" data-mu-loading-size="22" color="primary"
          style="width:40%">拍照上传</mu-button>
        <input id="uploaderInput" class="uploader__rinput" type="file" accept="image/*" capture="camera"
          @change="fileInput_change($event,item)">
      </div>
    </mu-paper>

    <mu-paper class="demo-paper form_submit" :z-depth="1">
      <mu-button class="back" style="width:40%" @click="goBack" v-if="!rowguid">返回</mu-button>
      <mu-button class="form_creat" @click="creatOrder">创建订单</mu-button>
    </mu-paper>
  </mu-container>
</template>

<script>
  import Loading from 'muse-ui-loading';
  import 'muse-ui-loading/dist/muse-ui-loading.css';
  import {
    ImagePreview
  } from 'vant';
  export default {
    props: ['rowguid'],
    data() {
      return {
        cardVue: {},
        loading: false,
        filelist: [],
        vendorObj: {},
        form1: {},
        form2: {},
        rowguids: "",
        flag: '',
        isupload: false
      }
    },
    created() {
      let _this = this;
      this.form1 = this.$store.state.first.form;
      this.form2 = this.$store.state.second.form;
      let rowguid = this.$route.query.rowguid;
      console.log(rowguid)
      this.flag = rowguid;
      if (rowguid) {
        _this.rowguids = rowguid;
        _this.form1.rowguid = rowguid;
        _this.getselvendorlist();
      } else {
        this.$api.orderdetail().then(function (res) {
          console.log(res)
          _this.rowguids = res.orderinfo.rowguid;
          _this.form1.rowguid = res.orderinfo.rowguid
          _this.getselvendorlist();
        })
      }
    },
    methods: {
      downloadTemplate: function (item) {
        this.$api.gettemplatefileurl({
          guaranteeid: this.form1.rowguid,
          filevendorid: item.filevendorid
        }).then(function (data) {
          window.location.href = data.downloadurl;
        })
      },
      getselvendorlist() {
        let _this = this;
        const query = {
          earnest: this.form2.earnest,
          guaranteetype: this.form2.guaranteetype
        }
        this.$api.vendordeal(query).then(function (data) {
          _this.vendorObj = data;
          _this.$api.applyfilelist({
            guaranteeid: _this.rowguids,
            vendorid: data.vendorid,
            isMobile: true,
            guaranteetype: _this.form2.guaranteetype
          }).then(function (res) {
            _this.filelist = res;
          })
        })
      },
      beforeRead(file) {
        console.log(file)
      },
      goBack() {
        this.$router.push('/applysecond')
      },
      onRead(file) {
        console.log(file)
        let formFile = new FormData();
        formFile.append("userFile", file)
      },
      timestampToTime: function (timestamp) {
        let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) +
          '-';
        let D = date.getDate();
        if (D <= 9) {
          D = '0' + D
        }
        return Y + M + D;
      },
      creatOrder: function () {
        var _this = this;
        let form = {
          bankid: this.vendorObj.banklist[0].bankid,
          bankname: this.vendorObj.banklist[0].bankname,
          vendorid: this.vendorObj.vendorid,
          vendorname: this.vendorObj.vendorname,
          shbj: '1',
        }
        this.form2.kbtime = this.timestampToTime(this.form2.kbtime).split('T')[0];
        if (_this.rowguids) {
          form.rowguid = _this.rowguids
        }

        let form3 = $.extend({}, form, this.form1, this.form2)
        const loading = this.$loading({
          text: '创建订单中,请稍等...'
        });
        this.$api.createorder(form3).then(function (data) {
            if (!data) {
              if (_this.flag) {
                _this.$router.push('/order')
                loading.close()
              } else {
                _this.$router.push({
                  path: '/creatorder',
                  query: {
                    rowguid: _this.rowguids
                  }
                })
                loading.close()
              }
            } else {
              loading.close();
            }
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      view(e) {
        ImagePreview([e])
      },

      fileInput_change: function (e, item) {
        let _this = this;
        let formFile = new FormData();
        const loading = this.$loading();
        formFile.append("userFile", $(e.target)[0].files[0]);

        formFile.append("fileguid", item.fileguid || '');
        formFile.append("vendorid", _this.vendorObj.dwcode || '');
        formFile.append("filevendorid", item.filevendorid || '');
        formFile.append("guaranteeid", _this.rowguids || '');
        formFile.append("filevendorname", item.filename || '');
        formFile.append("uptype", 'smj' || '');

        formFile.append("multifile", '0');
        $.ajax({
          type: "post",
          url: "/bhtong/ordermg/uploadfile.json",
          data: formFile,
          processData: false,
          contentType: false,
          success: function (data) {
            let res = data;
            loading.close();
            if (res.code === 'v') {
              _this.getselvendorlist();
            } else {
              loading.close();
              _this.$toast.fail(res.msg)
            }
          }
        })

      },
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
      }
    }

  }
</script>

<style lang="less" scoped>
  .form_container {
    margin-bottom: 20px;
  }

  .demo-paper {
    margin: 10px;
    padding: 15px;
  }

  .mu-buttons {
    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    box-shadow: none;
    border: 1px solid #bbbbbb;
  }

  .form_creat {
    background: #f18241;
    color: #fff;
    width: 40%
  }

  .form_submit {
    margin: 0;
    color: #fff;
    display: flex;
    justify-content: space-around;
    // position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: none;
    background: rgb(250, 250, 250)
  }

  .form_mar {
    margin-bottom: 60px;
  }

  .uploader__linput {
    position: absolute;
    left: 0;
    top: 0;
    width: 49%;
    opacity: 0;
    z-index: 999;
  }

  .uploader__rinput {
    position: absolute;
    right: 0;
    top: 0;
    width: 49%;
    opacity: 0;
  }

  .back {
    color: #f18241;
    background-color: rgb(250, 250, 250);
    border: 1px solid #f18241;
    box-shadow: none;
  }
</style>